<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>首页</title>
        <!--
        <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
        -->
        <style>
            #app>select {
                display: inline-block;
                width: 150px;
            }
        </style>
    </head>
    <body>
        <!--
        <form action="/upload/" method="post" enctype="multipart/form-data">
            <input type="file" name="photo">
            <input type="submit" value="确定">
        </form>
        -->
        <div>
            <input type="file" name="photo">
            <button id="okBtn">确定</button>
            <img id="preview" src="" alt="" width="120">
        </div>
        <img id="qrcode" src="" alt="" width="150">
        <!--
        <div id="app">
            <el-select v-model="provId" filterable placeholder="请选择" @change="getCities()">
                <el-option v-for="prov in provs" :key="prov.id"
                           :label="prov.name" :value="prov.id">
                </el-option>
            </el-select>
            <el-select v-model="cityId" filterable placeholder="请选择" @change="getCounties()">
                <el-option v-for="city in cities" :key="city.id"
                           :label="city.name" :value="city.id">
                </el-option>
            </el-select>
            <el-select v-model="countyId" filterable placeholder="请选择">
                <el-option v-for="county in counties" :key="county.id"
                           :label="county.name" :value="county.id">
                </el-option>
            </el-select>
        </div>
        <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.11/vue.min.js"></script>
        <script src="https://unpkg.com/element-ui/lib/index.js"></script>
        -->
        <script>
            /*
            let app = new Vue({
                el: '#app',
                data: {
                    provId: null,
                    cityId: null,
                    countyId: null,
                    provs: [],
                    cities: [],
                    counties: []
                },
                created() {
                    fetch('/api/districts/').then(resp => resp.json())
                        .then(json => this.provs = json)
                },
                methods: {
                    getCities() {
                        this.cities = []
                        this.counties = []
                        this.cityId = null
                        this.countyId = null
                        if (this.provId != 0) {
                            fetch('/api/districts/' + this.provId).then(resp => resp.json())
                                .then(json => this.cities = json.cities)
                        }
                    },
                    getCounties() {
                        this.counties = []
                        this.countyId = null
                        if (this.cityId != 0) {
                            fetch('/api/districts/' + this.cityId).then(resp => resp.json())
                                .then(json => this.counties = json.cities)
                        }
                    }
                }
            })
            */
        </script>
        <script>
            let okBtn = document.querySelector('#okBtn')
            okBtn.addEventListener('click', (evt) => {
                if (timerId != 0) {
                    clearTimeout(timerId)
                    timerId = 0
                }
                let fileInput = document.querySelector('input[name=photo]')
                let formData = new FormData()
                // formData.append('username', 'hellokitty')
                formData.append('photo', fileInput.files[0])
                fetch('/api/upload/', {
                    method: 'POST',
                    body: formData
                }).then(resp => resp.json()).then(json => {
                    alert(json.msg)
                    fileInput.value = ''
                    if (json.code == 30000) {
                        getPhoto(json.url)
                    }
                })
            })

            let timerId = 0

            function getPhoto(url) {
                fetch(url).then(resp => {
                    if (resp.status == 200) {
                        document.querySelector('#preview').src = url
                    } else {
                        timerId = setTimeout(() => {
                            getPhoto(url)
                        }, 2000)
                    }
                })
            }
        </script>
        <script>
            fetch('/qrcode/').then(resp => resp.json()).then(json => {
                let uuid = json.uuid
                let qrcodeImg = document.querySelector('#qrcode')
                qrcodeImg.src = '/qrimg/?uuid=' + uuid
                let url = 'ws://' + location.host + '/ws/chat/'
                let ws = new WebSocket(url)
                ws.onopen = (evt) => {
                    let data = {type: 'init', uuid: uuid}
                    console.log(data)
                    ws.send(JSON.stringify(data))
                }
                ws.onmessage = (evt) => {
                    let json = JSON.parse(evt.data)
                    console.log(json.message)
                }
            })
        </script>
    </body>
</html>